<template>
  <Menu mode="horizontal" accordion>
    <div v-for="item in menuData">
      <div v-if="item.children">
        <Submenu :name="item.id">
          <template slot="title">
            {{item.name}}
          </template>
          <div v-for="ch in item.children" :name="ch.id">
            <div v-if="ch.pagePath" >
              <div  @click="toTargetPage(ch.pagePath)" style="min-width: 200px; text-align: center">
                {{ ch.name }}
              </div>
            </div>
            <div v-else @click="goGoodsList(ch.id, ch.parentId)">
              <MenuGroup :title="ch.name" style="min-width: 200px">
                <MenuItem  v-for="finalItem in ch.children" :name="finalItem.id">
                  <div
                    @click="goGoodsList(finalItem.id, finalItem.parentId, item.id)"
                    class="menu-item"
                  >{{ finalItem.name }}</div>
                </MenuItem>
              </MenuGroup>
            </div>
          </div>
<!--            <MenuItem  v-for="ch in item.children" :name="ch.id">
              <div
                @click="goGoodsList(ch.id, ch.parentId)"
                class="menu-item"
              >{{ ch.name }}</div>
            </MenuItem>-->
        </Submenu>
      </div>
      <MenuItem v-else :name="item.id">
        <Icon type="ios-paper" />
        {{item.name}}
      </MenuItem>
    </div>
  </Menu>
</template>

<script>
import { getCategory } from "@/api/goods";
export default {
  name: "CategoryMenu",
  data() {
    return {
      menuData: [],
    }
  },
  created() {
    this.getCategory()
  },
  methods: {
    /**
     * 获取类目
     */
    getCategory() {
      getCategory(0).then((res) => {
        this.menuData = res.result
        if (res.success) {
          this.cateList = res.result;
          this.$store.commit("SET_CATEGORY", res.result);
          // 过期时间
          var expirationTime = new Date().setHours(new Date().getHours() + 1);
          // 存放过期时间
          localStorage.setItem("category_expiration_time", expirationTime);
          // 存放分类信息
          localStorage.setItem("category", JSON.stringify(res.result));
        }
      })
    },
    /**
     * 跳转到列表页面
     * @param id
     * @param secondId
     * @param firstId
     */
    goGoodsList(id, secondId, firstId) {
      // 分类共有三级，传全部分类过去
      const arr = [firstId, secondId, id];
      console.log(arr)
      if (!arr[1]) {
        arr.splice(0, 2);
      }
      if (!arr[0]) {
        arr.shift();
      }
      console.log(arr)
      let routerUrl = this.$router.resolve({
        path: "/goodsList",
        query: { categoryId: arr.toString() },
      });
      window.open(routerUrl.href, "_blank");
    },
    /**
     * 跳转到指定页面
     */
    toTargetPage(pagePath) {
      let routerUrl = this.$router.resolve({path:pagePath});
      window.open(routerUrl.href, "_blank");
    }
  }
}
</script>

<style scoped lang="scss">
.ivu-menu {
  padding-left: 10%;
  z-index: 1;
}
.menu-item {
  width: 100%;
  padding: 2px;
}
</style>
